<template>
  <view class="w-100 re h-100">
    <scroll-view
      class="scroll-view_H uni-scroll"
      scroll-y="true"
      @scrolltolower="lower"
      :lower-threshold="120"
    >
      <view class="w-100 fs-b-b pb-0 py-2 px-2-6">
        <view
          class="w-100 h222 f-b-c circle34 show0 mb-3 bg-f8ff re"
          v-for="(item, index) in data_list"
          :key="item.id"
        >
          <ImageFile
            :url="item.thumbnail"
            mode="aspectFill"
            className="w226 h222 ty-circle-img"
          />
          <view class="w470 bg-white h222 pl-4 pr-2 py-2 ty-circle-box">
            <view class="font32 t-20 font700 f-b-c">{{ item.name }}</view>
            <view class="font32 t-20 font700 py-1 f-y-e h52">
              <text class="font24 mr-05">¥</text>
              <text>{{ item.price }}</text>
            </view>
            <view class="font24 t-8 f-b-c h24">{{ item.remark || "" }}</view>
            <view
              class="ab bottom20 right20 w164 h64 f-c-c font28 t-0 circle20 bg-theme"
              @click="get_details('year_card', item)"
              >立即购票</view
            >
          </view>
          <view class="ab left206 top0 bottom0">
            <view
              class="w12 h12 show0-in ab left14 top28 bg-f8ff rounded-circle"
            ></view>
            <view
              class="w12 h12 show0-in ab left14 top50 bg-f8ff rounded-circle"
            ></view>
            <view
              class="w12 h12 show0-in ab left14 top72 bg-f8ff rounded-circle"
            ></view>
            <view
              class="w12 h12 show0-in ab left14 top94 bg-f8ff rounded-circle"
            ></view>
            <view
              class="w12 h12 show0-in ab left14 top116 bg-f8ff rounded-circle"
            ></view>
            <view
              class="w12 h12 show0-in ab left14 top138 bg-f8ff rounded-circle"
            ></view>
            <view
              class="w12 h12 show0-in ab left14 top160 bg-f8ff rounded-circle"
            ></view>
            <view
              class="w12 h12 show0-in ab left14 top182 bg-f8ff rounded-circle"
            ></view>
            <view
              class="ab left0 w40 h40 show-in-bottom"
              style="top: -20rpx"
            ></view>
            <view
              class="ab left0 w40 h40 show-in-top"
              style="bottom: -20rpx"
            ></view>
          </view>
        </view>
      </view>

      <view
        class="w-100 t-a font24 t-4 pb-1"
        v-if="is_loading && data_list.length > 0"
        >没有更多了</view
      >
      <view class="w-100 t-a font24 t-3 pt-12 pb-1" v-else>暂无数据</view>

      <view class="w-100 h190"></view>
    </scroll-view>
  </view>
</template>

<script>
import ImageFile from "../../components/img_file.vue";

import { yearCardList } from "../../api/ticket/index.js";
import Mixin from "../../common/mixin.js";
export default {
  mixins: [Mixin],
  components: {
    ImageFile,
  },
  data() {
    return {
      query: {
        pageSize: 5,
        currentPage: 1,
      },
      is_loading: false,
      data_list: [],
      path: "",
    };
  },
  created() {
    this.path = uni.getStorageSync("host") || "";
    this.get_data_list();
  },
  methods: {
    get_data_list() {
      this.is_loading = true;
      yearCardList(this.query).then((res) => {
        const { records, current, pages } = res.body;
        this.data_list = [...this.data_list, ...records];
        // 当前页大于总页 显示没有更多了
        if (current >= pages) {
          this.is_loading = true;
        } else {
          this.is_loading = false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll-view_H {
  position: absolute;
  top: 30rpx;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
}
.ty-line-info {
  border-radius: 0 28rpx 28rpx 28rpx;
  margin-top: -32rpx;
}
.show-in-top {
  // box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
  &::after {
    z-index: 1;
    width: 80rpx;
    height: 60rpx;
    content: " ";
    top: -12rpx;
    position: absolute;
    left: -20rpx;
    display: block;
    background: #f7fdff; //背景色
    border-radius: 36rpx 36rpx 0 0;
    box-shadow: 1px 4px 1px inset rgba(0, 0, 0, 0.03);
    transform: rotate(0deg) scale(0.5);
  }
}
.show-in-bottom {
  // box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
  // transform: rotate(-90deg);
  // border-radius: 50% 0 0 50%;
  // border-radius: 72rpx 72rpx 0 0;
  // box-shadow: -4rpx 14rpx 20rpx inset rgba(0, 0, 0, 0.03);
  // transform: rotate(-90deg);
  &::after {
    z-index: 1;
    width: 80rpx;
    height: 60rpx;
    content: " ";
    top: -8rpx;
    position: absolute;
    left: -20rpx;
    display: block;
    background: #f7fdff; //背景色
    border-radius: 36rpx 36rpx 0 0;
    box-shadow: 1px 4px 1px inset rgba(0, 0, 0, 0.03);
    transform: rotate(180deg) scale(0.5);
  }
}
</style>
